<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>分析生命周期</title>
   <!-- 引入Vue -->
   <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>   
</head>
<body>
     <!-- 准备一个容器 -->
    <div id="root">
        <h2 v-text="n"></h2>
        <h2>当前n的值是：{{n}}</h2>
        <button @click="add">点我n+1</button>
        <button @click="bye">点我销毁vm</button>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;  // 阻止 vue 在启动时生成生产提示。
    
    // 创建Vue实例
    new Vue({
        el: '#root',
        // template:` 
        //     <div>
        //         <h2>当前n的值是：{{n}}</h2>
        //         <button @click="add">点我n+1</button>
        //     </div>
        //  `,
        data: {
          n:1
        },
        methods: {
            add(){
                console.log('add');
                this.n++
            },
            bye(){
                console.log('bye');
                this.$destroy()
            }
        },
        watch: {
            n(){
                console.log('n变了');
            }
        },
        beforeCreate() {
            console.log('beforeCreate');
            // debugger; // 断点
        },
        created() {
            console.log('created');
        },
        beforeMount() {
            console.log('beforeMount');
        },
        mounted() {
            console.log('mounted');
        },
        beforeUpdate() {
            console.log('beforeUpdate');
        },
        updated() {
            console.log('updated');
        },
        beforeDestroy() {
            console.log('beforeDestroy');
        },
        destroyed() {
            console.log('destroyed');
        },
    })
</script>
</html>